<template>
	<div id="index">

		<div class="i_maxW">
			<div class="roomH">
				<img src="../../../../public/images/bgc033.png">
			</div>
			<div class="roomP clear">
				<span class="fl">
					<img :src="BASE_URL + userData.avatar_path">
				</span>
				<div class="roomP_r">
					<div class="roomP_user clear">
						<div>
							<h3>{{userData.name}}</h3>
							<span v-if="userData.sub_name &&  userData.sub_name != '暂未绑定科目' ">{{userData.sub_name}}</span >
							<span v-if="userData.role_name">{{userData.role_name}}</span >
							<template v-for="item of userData.class">
								<span :key="item.id">{{item.name}}</span >
							</template>
							
						</div>
						<!--  -->
						<div v-if=" userData.id !== $g.user_id">

							<button v-preventReClick="1000" @click="getFollow(userData.id, 'add')" v-if="userData.is_relation === 1" class="is_follow">
								<i class="ipng but_Collection01_down" ></i>
								<em>已关注</em>
							</button>

							<button v-preventReClick="1000" @click="getFollow(userData.id, 'del')" v-else>
								<i class="ipng but_Collection01_up" ></i>
								<em>加关注</em>
							</button>
							<button v-preventReClick class="is_follow" @click="parent(userData)">
								<i class="ipng but_chat01_up"></i><em>发私信</em>
							</button>
						</div>
					</div>

					<div class="roomP_synopsis" >
						<P>
							{{userData.autograph}}
						</P>
					</div>
					<!--  -->
					<div class="roomP_info" >
						<span>粉丝 {{userData.relation_num}}</span>
						<span>关注 {{followNumber ? followNumber : 0}}</span>
						<span v-if="roleIdentity">课程 {{videoLength }}</span>
						<!-- <span v-if="userData.sub_name &&  userData.sub_name != '暂未绑定科目' ">总播放量 {{userData.video_click}}</span> -->
						<span>资源 {{resource_sum}}</span>
					</div>

				</div>
			</div>
			<!--  -->
			<div class="space-conten i_maxW clear">
				<div class="space-path fl">
					<el-menu
					:default-active="activeIndex">
						<template v-if="infoParam.id == $g.user_id">
							<el-menu-item index="1" v-if="roleIdentity">
								<router-link :to="{path: '/space/video', query: {id: infoParam.id}}">我的课程</router-link>
								<i class="ipng icon_mingshi_shipin"></i>
								<i class="ipng Shape_04"></i>
							</el-menu-item>
							<el-menu-item index="2">
								<router-link :to="{path: '/space/resource', query: {id: infoParam.id}}">我的资源</router-link>
								<i class="ipng icon_mingshi_ziyuan"></i>
								<i class="ipng Shape_04"></i>
							</el-menu-item>
							<el-menu-item index="3">
								<router-link :to="{path: '/space/journal', query: {id: infoParam.id}}">我的日记</router-link>
								<i class="ipng icon_mingshi_rizhi"></i>
								<i class="ipng Shape_04"></i>
							</el-menu-item>
							<el-menu-item index="4">
								<router-link :to="{path: '/space/fans', query: {id: infoParam.id}}">我的粉丝</router-link>
								<i class="ipng icon_mingshi_fenshi"></i>
								<i class="ipng Shape_04"></i>
							</el-menu-item>
							<el-menu-item index="5">
								<router-link :to="{path: '/space/follow', query: {id: infoParam.id}}">我的关注</router-link>
								<i class="ipng icon_mingshi_shouchang"></i>
								<i class="ipng Shape_04"></i>
							</el-menu-item>
							<el-menu-item index="6" v-if="userData.role_base == 6">
								<router-link :to="{path: '/space/teachersFiles', query: {id: infoParam.id}}">我的档案</router-link>
								<i class="ipng quanzu_icon01"></i>
								<i class="ipng Shape_04"></i>
							</el-menu-item>
						</template>
						<template v-else>
							<el-menu-item index="1" v-if="roleIdentity">
								<router-link :to="{path: '/space/video', query: {id: infoParam.id}}">Ta的课程</router-link>
								<i class="ipng icon_mingshi_shipin"></i>
								<i class="ipng Shape_04"></i>
							</el-menu-item>
							<el-menu-item index="2">
								<router-link :to="{path: '/space/resource', query: {id: infoParam.id}}">Ta的资源</router-link>
								<i class="ipng icon_mingshi_ziyuan"></i>
								<i class="ipng Shape_04"></i>
							</el-menu-item>
							<el-menu-item index="3">
								<router-link :to="{path: '/space/journal', query: {id: infoParam.id}}">Ta的日记</router-link>
								<i class="ipng icon_mingshi_rizhi"></i>
								<i class="ipng Shape_04"></i>
							</el-menu-item>
							<el-menu-item index="4">
								<router-link :to="{path: '/space/fans', query: {id: infoParam.id}}">Ta的粉丝</router-link>
								<i class="ipng icon_mingshi_fenshi"></i>
								<i class="ipng Shape_04"></i>
							</el-menu-item>
							<el-menu-item index="5">
								<router-link :to="{path: '/space/follow', query: {id: infoParam.id}}">Ta的关注</router-link>
								<i class="ipng icon_mingshi_shouchang"></i>
								<i class="ipng Shape_04"></i>
							</el-menu-item>
							<el-menu-item v-if="userData.role_base == 6" index="6">
								<router-link :to="{path: '/space/teachersFiles', query: {id: infoParam.id}}">Ta的档案</router-link>
								<i class="ipng quanzu_icon01"></i>
								<i class="ipng Shape_04"></i>
							</el-menu-item>
						</template>
					</el-menu>
				</div>
				<div class="space-template">
					   <router-view @setFollow="setFollow"/>
				</div>
			</div>
		</div>
		<chat  ref="child"></chat>
	</div>
</template>

<script>
	import chat from '@/components/common/chat';
	export default {
		components: {chat},
		data() {
			return {
				testData:'初始化',
				infoParam:{
					id: this.$route.query.id,
					userid: this.$g.user_id
					// level:2,
				},
				infoResult:{
					avatar:'../../../public/images/Group9.png',
					name:'',
					subject_name:'',
					fans:0,
					courses:0,
					clicks:0,
					role: '',
					org_name: '',
					resource_num: 0,
					desc: '',
					id: ''
				},
				total_number:0,
				noticeList:[],
				isActivePath: false,
				userData: {},
				resource_sum: '',
				activeIndex: '1',
				is_newlogin:  is_empty(this.$store.state.userInfo) ? false : true,
				chatRecord: false,
				followNumber: 0,
				classUserid: [],
				roleIdentity: false,
				videoLength: 0
			}
		},
		watch: {
			$route:{
				handler(newval, val   ){
					if (newval.query.id !== val.query.id) {
						this.infoParam.id = newval.query.id
				    	this.getInfo();
				    	this.follow()
			       		this.getResourceList()
			       		// this.getClassUserid()
					}
				},
				deep: true
			},
		},
		created(){},
		mounted() {
			this.$nextTick( ()=> {
				this.getInfo();
				this.getResourceList()
				this.follow()
				this.getClassUserid()
				this.getVideoList()
				
		    	// 代码保证 this.$el 在 document 中
		    	window.addEventListener("popstate", function(e) { 
		    			if (window.location.pathname == '/login') {
		    				let http= sessionStorage.getItem( 'host_addr' )
		    				let host = sessionStorage.getItem( 'host' )
		    				let redirectParams = sessionStorage.getItem( 'redirect_params' )
		    				let url = `${http}/personal${redirectParams}&host=${host}`
		    				window.location.href = url
		    			}
				}, false);
		 	})
		},
		computed: {},
		methods: {
			role(){
				let role = this.userData.role_base.includes('6')
				if (!role) {
					this.activeIndex = '2'  
					this.roleIdentity = false
					this.$router.push({path: '/space/resource',query: {id: this.infoParam.id}}) 
				}else{
					this.roleIdentity = true
				}

				// return role
			},
			getVideoList(){
				let success = (data=>{
					this.VideoList = data.data.data;
					//console.info(this.VideoList)
					this.videoLength =  data.data.data_sum;
				})
				//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
				// this.$ajax.get('api/video/teacher_video',{params: this.listVideoParam,func:{success:success}})

				if (this.$g.user_id == this.$route.query.id) {
					this.$ajax.get('api/video/video_list',{
						params: {
							create_id: this.$route.query.id,
							page_index: this.page_index,
							page_size:this.page_size,
							stutas: '1,2,3',
						},
						func:{success:success}
					})
				}else{
					this.$ajax.get('api/video/video_list',{
						params: {
							create_id: this.$route.query.id,
							page_index: this.page_index,
							page_size:this.page_size,
							stutas: '1',
							authority:1
						},
						func:{success:success}
					})
				}
				// this.$ajax.get('api/video/video_list',{params: this.listVideoParam,func:{success:success}})
			},
			/*
				监听子路有的事件改变当前的数据
			*/
			setFollow(data){
				console.log(data, 'ffghjj')
				if (data == 'follow') {
					this.getInfo();
					this.follow()
				}else if (data == 'fans'){
					this.follow()
				}
			},
			/*
				获取用户所在的班级
			*/
			getClassUserid(){
				let success = (res=>{
					this.classUserid = res.data
					for (var i = 0; i < this.classUserid.length; i++) {
						this.classUserid[i].org_tre_name = this.classUserid[i].org_tre_name.substring(4, 15)
					}
				});
				this.$ajax({
					url: 'api/org/class_userid',
					method: 'get',
					params: {
						user_id: this.$route.query.id
					},
					func: {success: success}
				})
			},
			follow(){
				let success  = (res =>{
					let data = res.data
					this.followNumber = data.data_sum;
				})
				this.$ajax({
					url: 'api/user/relation',
					method: 'get',
					params: {
						user_id: this.$route.query.id,
						type: 1,
						data_type: 2
					},
					func: {
						success: success
					}
				})
			},
			parent(obj){
				if (!this.is_newlogin) {
					this.$message.warning('请登录~')
					return
				}
				if ( obj.id === this.$g.user_id) {
					this.$message.warning('不能跟自己聊天~')
					return
				} 
				this.$refs.child.getUserChatOne(obj)
			},
			getInfo(){

				let success = ( data =>{
					let res = data.data[0]
					this.userData = res
					if( process.env.NODE_ENV =='production' ){
					    this.infoResult.avatar = this.BASE_URL + res.avatar_path;
					}else{
					    this.infoResult.avatar  = this.BASE_URL + res.avatar_path;
					}

					this.role()
					this.infoResult.name = res.name;
					this.infoResult.subject_name = res.sub_name;
					this.infoResult.fans = res.relation_num;
					this.infoResult.courses = res.video_num;
					this.infoResult.clicks = res.video_click;
					this.infoResult.resource_num = res.resource_num;
					this.infoResult.role = parseInt(res.role_id)
					this.infoResult.org_name = res.org_name,
					this.infoResult.desc = res.autograph
            	})
            	
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	// this.$ajax.get('api/user/user_info',{params: this.infoParam,func:{success:success}})
            	this.$ajax.get('api/user/user',{params: this.infoParam,func:{success:success}})
			},
			getFollow(id, type){

				if (!this.is_newlogin) {
					this.$message.warning('请登录~')
					return
				}
				let state = ''
				if (type == 'add') {
					state = 'del'
				}else{
					state = 'add'
					
				}
				let success = ( res =>{
					this.$message.success(res.msg);
					this.getInfo()
				});


				this.$ajax({
					url: 'api/user/bind_relation',
					method: 'post',
					data: {
						user_id: this.$g.user_id,
						follow_id: id,
						add_delete: state,
						type: 0
					},
					func: {
						success: success
					}
				})
			},
			//学生==资源总数
			getResourceList(){
				let success = (res=>{
					let data = res.data
					this.resource_sum = data.data_sum
				})

				let params = '';

				if (this.$g.user_id == this.infoParam.id) {

					this.$ajax.get('api/Resource/resource',{
						params: {
							
							create_id: this.infoParam.id,
							size: this.size,
							page: this.page,
							data_type: 2,
							status: '1,2,3',
						},
						func:{success:success}
					})
				}else{

					this.$ajax.get('api/Resource/resource',{
						params: {
							create_id: this.infoParam.id,
							size: this.size,
							page: this.page_index,
							data_type: 2,
							status: 1,
							authority:1
						},
						func:{success:success}
					})
				}

           	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
           	// this.$ajax.get('api/Resource/resource'params,{func:{success:success}})
           },

		}
	}
</script>
